<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>登录 - WebSocket 聊天</title>
  <link rel="stylesheet" href="/styles.css" />
  <style>
    .login-card{
      max-width:420px;margin:10vh auto;padding:24px;border-radius:16px;
      background:rgba(17,24,39,.6);border:1px solid rgba(148,163,184,.12);box-shadow:0 8px 24px rgba(0,0,0,.35)
    }
    .login-card h1{margin:0 0 12px 0;font-size:20px}
    .login-card .field{margin-top:10px}
    .login-card input{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(148,163,184,.18);
      background:rgba(2,6,23,.35);color:#e5e7eb;outline:none}
    .login-card button{margin-top:12px;width:100%;padding:12px;border-radius:12px;border:1px solid rgba(148,163,184,.2);
      background:linear-gradient(180deg, rgba(34,211,238,.15), rgba(96,165,250,.15));color:#e5e7eb;cursor:pointer}
    .hint{margin-top:10px;color:#cbd5e1;font-size:13px}
    .error{margin-top:8px;color:#ef4444;font-size:13px;display:none}
  </style>
</head>
<body>
  <div class="app">
    <div class="login-card">
      <h1>登录聊天室</h1>
      <div class="field"><input id="username" type="text" placeholder="用户名（测试用：123）" autocomplete="username" /></div>
      <div class="field"><input id="password" type="password" placeholder="密码（测试用：123）" autocomplete="current-password" /></div>
      <div class="field"><input id="nick" type="text" placeholder="昵称（默认等于用户名）" /></div>
      <button id="go">登录并进入聊天室</button>
      <div id="err" class="error">用户名或密码错误（测试用：用户名=123，密码=123）</div>
      <div class="hint">当前为演示登录，验证在前端完成；生产环境需改为后端校验。</div>
    </div>
  </div>
  <script>
    const $ = (s)=>document.querySelector(s);
    const usernameEl = $("#username");
    const passwordEl = $("#password");
    const nickEl = $("#nick");
    const errEl = $("#err");
    const goBtn = $("#go");

    function doLogin(){
      const u = (usernameEl.value||"").trim();
      const p = (passwordEl.value||"").trim();
      let n = (nickEl.value||"").trim();
      if(!u || !p){ errEl.style.display="block"; return; }
      if(u !== "123" || p !== "123"){ errEl.style.display="block"; return; }
      if(!n) n = u; // 昵称默认等于用户名
      // 记录登录状态与昵称
      localStorage.setItem("authOK", "1");
      localStorage.setItem("nickname", n);
      // 进入聊天页
      window.location.href = "/chat";
    }

    goBtn.addEventListener("click", doLogin);
    passwordEl.addEventListener("keydown", (e)=>{ if(e.key==="Enter") doLogin(); });
    usernameEl.addEventListener("keydown", (e)=>{ if(e.key==="Enter") doLogin(); });
    nickEl.addEventListener("keydown", (e)=>{ if(e.key==="Enter") doLogin(); });
  </script>
</body>
</html>